<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <!-- 页面标题和描述 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="alert alert-success">
                    <h4><i class="fa fa-industry"></i> {$title}</h4>
                    <p>{$description}</p>
                    <p><strong>设备类型：</strong> 涂布机实时监控</p>
                    <p><strong>当前视图：</strong> {$view_name}</p>
                </div>
            </div>
        </div>

        <!-- 实时状态卡片 -->
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-blue"><i class="fa fa-thermometer-full"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">最高温度</span>
                        <span class="info-box-number" id="max-temperature">--</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-green"><i class="fa fa-tachometer"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">最高压力</span>
                        <span class="info-box-number" id="max-pressure">--</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-orange"><i class="fa fa-cogs"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">运行状态</span>
                        <span class="info-box-number" id="running-status">--</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="fa fa-clock-o"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">最后更新</span>
                        <span class="info-box-number" id="last-update">--</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 温度监控区域 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-danger">
                    <div class="box-header with-border">
                        <h3 class="box-title">温度监控</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-red">
                                    <div class="inner">
                                        <h3 id="blender-temperature">--</h3>
                                        <p>搅拌机温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-fire"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-orange">
                                    <div class="inner">
                                        <h3 id="feed-inlet-temperature">--</h3>
                                        <p>原料进口温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-arrow-right"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-yellow">
                                    <div class="inner">
                                        <h3 id="feed-outlet-temperature">--</h3>
                                        <p>原料出口温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-arrow-left"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-purple">
                                    <div class="inner">
                                        <h3 id="knife-temperature">--</h3>
                                        <p>刀温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-cut"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-info">
                                    <div class="inner">
                                        <h3 id="left-temperature">--</h3>
                                        <p>左温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-thermometer-quarter"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-success">
                                    <div class="inner">
                                        <h3 id="middle-temperature">--</h3>
                                        <p>中温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-thermometer-half"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-warning">
                                    <div class="inner">
                                        <h3 id="right-temperature">--</h3>
                                        <p>右温度</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-thermometer-three-quarters"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-danger">
                                    <div class="inner">
                                        <h3 id="n8-temperature">--</h3>
                                        <p>温度8</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-thermometer-full"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 压力监控区域 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">压力监控</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-info">
                                    <div class="inner">
                                        <h3 id="cooling-tower-pressure">--</h3>
                                        <p>冷却塔压力</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-tint"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-success">
                                    <div class="inner">
                                        <h3 id="watercooler-pressure">--</h3>
                                        <p>冷水机压力</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-snowflake-o"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-warning">
                                    <div class="inner">
                                        <h3 id="material-pressure">--</h3>
                                        <p>原料压力</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-flask"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="small-box bg-danger">
                                    <div class="inner">
                                        <h3 id="n4-pressure">--</h3>
                                        <p>压力4</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-compress"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 间隙监控区域 -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <h3 class="box-title">间隙监控</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="row">
                            <div class="col-md-4 col-sm-6">
                                <div class="small-box bg-info">
                                    <div class="inner">
                                        <h3 id="clearances-left">--</h3>
                                        <p>左间隙</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-arrows-h"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="small-box bg-success">
                                    <div class="inner">
                                        <h3 id="clearances-middle">--</h3>
                                        <p>中间隙</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-arrows-h"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="small-box bg-warning">
                                    <div class="inner">
                                        <h3 id="clearances-right">--</h3>
                                        <p>右间隙</p>
                                    </div>
                                    <div class="icon">
                                        <i class="fa fa-arrows-h"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制按钮区域 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="box box-default">
                    <div class="box-body">
                        <div class="btn-group">
                            <a href="/plc?ref=addtabs" class="btn btn-primary">
                                <i class="fa fa-home"></i> 返回默认视图
                            </a>
                            <a href="/plc?view=bbb&ref=addtabs" class="btn btn-info">
                                <i class="fa fa-cogs"></i> 切换到BBB视图
                            </a>
                            <button type="button" class="btn btn-success btn-refresh-data">
                                <i class="fa fa-refresh"></i> 手动刷新
                            </button>
                            <button type="button" class="btn btn-warning btn-toggle-auto-refresh">
                                <i class="fa fa-play"></i> 开启自动刷新
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function() {
    let autoRefreshInterval = null;
    let isAutoRefresh = false;

    // 更新最后更新时间
    function updateLastUpdateTime() {
        $('#last-update').text(new Date().toLocaleString());
    }

    // 模拟API请求获取数据
    function fetchCoaterData() {
        // 模拟API响应数据
        const mockData = {
            "list": [{
                "id": 1,
                "batchId": "BATCH-2025-11-12-001",
                "info": {
                    "blenderTemperature": Math.random() * 100 + 50,
                    "feedInletTemperature": Math.random() * 80 + 40,
                    "feedOutletTemperature": Math.random() * 90 + 45,
                    "knifeTemperature": Math.random() * 120 + 60,
                    "leftTemperature": Math.random() * 70 + 35,
                    "middleTemperature": Math.random() * 75 + 38,
                    "rightTemperature": Math.random() * 72 + 36,
                    "n8Temperature": Math.random() * 85 + 42,
                    "coolingTowerPressure": Math.random() * 10 + 5,
                    "watercoolerPressure": Math.random() * 8 + 4,
                    "materialPressure": Math.random() * 15 + 7,
                    "n4Pressure": Math.random() * 12 + 6,
                    "clearancesLeft": {
                        "clearance": Math.random() * 5 + 1,
                        "position": Math.random() * 100 + 50,
                        "travelMax": 200,
                        "travelMin": 0
                    },
                    "clearancesMiddle": {
                        "clearance": Math.random() * 5 + 1,
                        "position": Math.random() * 100 + 50,
                        "travelMax": 200,
                        "travelMin": 0
                    },
                    "clearancesRight": {
                        "clearance": Math.random() * 5 + 1,
                        "position": Math.random() * 100 + 50,
                        "travelMax": 200,
                        "travelMin": 0
                    }
                },
                "time": new Date().toISOString()
            }],
            "total": 1
        };

        return Promise.resolve(mockData);
    }

    // 更新UI显示数据
    function updateUIData(data) {
        const coaterInfo = data.list[0].info;

        // 更新温度数据
        $('#blender-temperature').text(coaterInfo.blenderTemperature.toFixed(1) + '°C');
        $('#feed-inlet-temperature').text(coaterInfo.feedInletTemperature.toFixed(1) + '°C');
        $('#feed-outlet-temperature').text(coaterInfo.feedOutletTemperature.toFixed(1) + '°C');
        $('#knife-temperature').text(coaterInfo.knifeTemperature.toFixed(1) + '°C');
        $('#left-temperature').text(coaterInfo.leftTemperature.toFixed(1) + '°C');
        $('#middle-temperature').text(coaterInfo.middleTemperature.toFixed(1) + '°C');
        $('#right-temperature').text(coaterInfo.rightTemperature.toFixed(1) + '°C');
        $('#n8-temperature').text(coaterInfo.n8Temperature.toFixed(1) + '°C');

        // 更新压力数据
        $('#cooling-tower-pressure').text(coaterInfo.coolingTowerPressure.toFixed(1) + 'MPa');
        $('#watercooler-pressure').text(coaterInfo.watercoolerPressure.toFixed(1) + 'MPa');
        $('#material-pressure').text(coaterInfo.materialPressure.toFixed(1) + 'MPa');
        $('#n4-pressure').text(coaterInfo.n4Pressure.toFixed(1) + 'MPa');

        // 更新间隙数据
        $('#clearances-left').text(coaterInfo.clearancesLeft.clearance.toFixed(2) + 'mm');
        $('#clearances-middle').text(coaterInfo.clearancesMiddle.clearance.toFixed(2) + 'mm');
        $('#clearances-right').text(coaterInfo.clearancesRight.clearance.toFixed(2) + 'mm');

        // 更新统计信息
        const temperatures = [
            coaterInfo.blenderTemperature, coaterInfo.feedInletTemperature,
            coaterInfo.feedOutletTemperature, coaterInfo.knifeTemperature,
            coaterInfo.leftTemperature, coaterInfo.middleTemperature,
            coaterInfo.rightTemperature, coaterInfo.n8Temperature
        ];
        const pressures = [
            coaterInfo.coolingTowerPressure, coaterInfo.watercoolerPressure,
            coaterInfo.materialPressure, coaterInfo.n4Pressure
        ];

        $('#max-temperature').text(Math.max(...temperatures).toFixed(1) + '°C');
        $('#max-pressure').text(Math.max(...pressures).toFixed(1) + 'MPa');
        $('#running-status').text('正常运行');

        updateLastUpdateTime();
    }

    // 刷新数据
    function refreshData() {
        Toastr.info('正在获取涂布机数据...');

        fetchCoaterData()
            .then(data => {
                updateUIData(data);
                Toastr.success('数据更新成功');
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                Toastr.error('获取数据失败');
            });
    }

    // 切换自动刷新
    function toggleAutoRefresh() {
        if (isAutoRefresh) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
            isAutoRefresh = false;
            $('.btn-toggle-auto-refresh').html('<i class="fa fa-play"></i> 开启自动刷新');
            $('.btn-toggle-auto-refresh').removeClass('btn-danger').addClass('btn-warning');
            Toastr.info('已关闭自动刷新');
        } else {
            autoRefreshInterval = setInterval(refreshData, 5000); // 5秒刷新一次
            isAutoRefresh = true;
            $('.btn-toggle-auto-refresh').html('<i class="fa fa-stop"></i> 停止自动刷新');
            $('.btn-toggle-auto-refresh').removeClass('btn-warning').addClass('btn-danger');
            Toastr.success('已开启自动刷新 (5秒/次)');
        }
    }

    // 事件绑定
    $('.btn-refresh-data').on('click', refreshData);
    $('.btn-toggle-auto-refresh').on('click', toggleAutoRefresh);

    // 初始化
    updateLastUpdateTime();
    refreshData(); // 首次加载数据

    console.log('当前加载的视图：涂布机实时监控视图');
});
</script>